<template>
  <div class="live-player-container">
    <!-- 播放器和弹幕容器 -->
    <div class="player-and-danmaku" :style="{ width, height }">
      <!-- 视频播放器 -->
      <hls-player
        :src="src"
        width="100%"
        height="100%"
        :autoplay="autoplay"
        :muted="muted"
        :show-controls="true"
        @play="onPlay"
        @pause="onPause"
        @ended="onEnded"
        @error="onError"
      />

      <!-- 弹幕容器 -->
      <div class="danmaku-container" ref="danmakuContainer" :style="{ display: danmakuVisible ? 'block' : 'none' }">
        <!-- 弹幕会通过JS动态添加到这里 -->
      </div>

      <!-- 简单的弹幕控制 -->
      <div class="danmaku-controls">
        <button
          class="toggle-button"
          @click="toggleDanmakuVisible"
        >
          <i class="fas" :class="danmakuVisible ? 'fa-comment-slash' : 'fa-comment'"></i>
          {{ danmakuVisible ? '关闭弹幕' : '开启弹幕' }}
        </button>

        <select
          v-model="danmakuSpeed"
          class="speed-select"
          @change="updateDanmakuSpeed"
        >
          <option value="slow">慢速</option>
          <option value="normal" selected>正常</option>
          <option value="fast">快速</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
import HlsPlayer from './HlsPlayer.vue';

export default {
  name: 'HlsPlayerWithDanmakuDisplay',
  components: {
    HlsPlayer
  },
  props: {
    // 直播流地址
    src: {
      type: String,
      required: true
    },
    // 外部传入的弹幕消息列表（用于实时更新）
    danmakuMessages: {
      type: Array,
      default: () => []
    },
    // 播放器宽度
    width: {
      type: [String, Number],
      default: '100%'
    },
    // 播放器高度
    height: {
      type: [String, Number],
      default: '500px'
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: false
    },
    // 是否静音
    muted: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 弹幕相关状态
      danmakuVisible: true,
      danmakuSpeed: 'normal', // slow, normal, fast
      danmakuSpeedMap: {
        slow: 80,    // 每秒移动的像素数
        normal: 120,
        fast: 180
      },

      // 播放状态
      isPlaying: true,

      // 弹幕轨道管理
      trackCount: 5, // 弹幕轨道数量
      trackUsage: [], // 记录每个轨道是否被占用
      displayedDanmakus: new Set() // 已显示的弹幕ID集合，避免重复显示
    };
  },
  watch: {
    // 监听外部传入的弹幕列表变化，显示新弹幕
    danmakuMessages(newMessages) {
      newMessages.forEach(msg => {
        // 只显示未显示过的弹幕
        if (!this.displayedDanmakus.has(msg.id)) {
          this.displayedDanmakus.add(msg.id);
          this.displayDanmaku(msg);

          // 限制已显示弹幕ID的数量，防止内存占用过大
          if (this.displayedDanmakus.size > 1000) {
            const oldest = Array.from(this.displayedDanmakus).shift();
            this.displayedDanmakus.delete(oldest);
          }
        }
      });
    }
  },
  created() {
    // 初始化轨道使用状态
    this.trackUsage = Array(this.trackCount).fill(false);
  },
  mounted() {
    // 监听窗口大小变化，调整弹幕显示
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
    this.clearAllDanmaku();
  },
  methods: {
    // 显示弹幕
    displayDanmaku(danmaku) {
      if (!this.danmakuVisible || !this.isPlaying) return;
      const container = this.$refs.danmakuContainer;
      if (!container) return;
      // 创建弹幕元素
      const danmakuEl = document.createElement('div');
      danmakuEl.className = `danmaku-item ${danmaku.isSpecial ? 'special-danmaku' : ''}`;
      danmakuEl.textContent = danmaku.text;
      danmakuEl.style.color = danmaku.color || this.getRandomColor();

      // 设置弹幕位置（随机选择一个轨道）
      const track = this.getAvailableTrack();
      if (track === -1) return; // 没有可用轨道

      // 标记轨道为占用
      this.trackUsage[track] = true;

      // 计算轨道位置
      const containerHeight = container.clientHeight;
      const trackHeight = containerHeight / this.trackCount;
      const topPos = track * trackHeight + 10; // 10px 间距

      danmakuEl.style.top = `${topPos}px`;
      danmakuEl.style.right = `-${danmakuEl.offsetWidth}px`; // 初始位置在容器右侧外部

      // 添加到容器
      container.appendChild(danmakuEl);

      // 计算动画持续时间（基于容器宽度和速度）
      const containerWidth = container.clientWidth;
      const duration = (containerWidth + danmakuEl.offsetWidth) /
        this.danmakuSpeedMap[this.danmakuSpeed];

      // 执行动画
      const startTimestamp = Date.now();
      const animate = () => {
        // 如果弹幕已被移除或播放器已暂停，停止动画
        if (!container.contains(danmakuEl) || !this.isPlaying || !this.danmakuVisible) {
          this.trackUsage[track] = false;
          return;
        }

        const elapsed = (Date.now() - startTimestamp) / 500; // 秒
        const distance = elapsed * this.danmakuSpeedMap[this.danmakuSpeed];
        const position = containerWidth - distance + danmakuEl.offsetWidth;

        if (position < -danmakuEl.offsetWidth) {
          // 弹幕已完全移出容器
          container.removeChild(danmakuEl);
          this.trackUsage[track] = false;
          return;
        }

        danmakuEl.style.right = `${position}px`;
        requestAnimationFrame(animate);
      };

      // 开始动画
      requestAnimationFrame(animate);
    },

    // 获取可用的轨道
    getAvailableTrack() {
      // 查找第一个可用轨道
      for (let i = 0; i < this.trackCount; i++) {
        if (!this.trackUsage[i]) {
          return i;
        }
      }

      // 如果所有轨道都被占用，随机选择一个
      return Math.floor(Math.random() * this.trackCount);
    },

    // 切换弹幕显示/隐藏
    toggleDanmakuVisible() {
      this.danmakuVisible = !this.danmakuVisible;
    },

    // 更新弹幕速度
    updateDanmakuSpeed() {
      // 清除现有弹幕，新弹幕将使用新速度
      this.clearAllDanmaku();
    },

    // 清除所有弹幕
    clearAllDanmaku() {
      const container = this.$refs.danmakuContainer;
      if (container) {
        container.innerHTML = '';
        this.trackUsage.fill(false); // 重置轨道状态
      }
    },

    // 处理窗口大小变化
    handleResize() {
      this.clearAllDanmaku();
    },

    // 获取随机颜色
    getRandomColor() {
      const colors = [
        '#ffffff', '#ffff00', '#ff0000', '#00ff00',
        '#00ffff', '#ff00ff', '#0000ff', '#ff9900'
      ];
      return colors[Math.floor(Math.random() * colors.length)];
    },

    // 视频播放
    onPlay () {
      console.log('视频开始播放');
      this.isPlaying = true
    },
    onPause () {
      console.log('视频暂停');
      this.isPlaying = false
    },
    onEnded () {
      console.log('视频播放结束');
      this.isPlaying = false
    },
    onError (error) {
      console.error('播放错误:', error);
      this.isPlaying = false
    }
  }
};
</script>

<style scoped>
.live-player-container {
  position: relative;
  width: 100%;
}

.player-and-danmaku {
  position: relative;
  background-color: #000;
}

/* 弹幕容器样式 */
.danmaku-container {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  height: calc(40% - 40px); /* 留出控制栏空间 */
  pointer-events: none; /* 允许点击穿透到视频 */
  overflow: hidden;
  z-index: 4; /* 确保在视频上方，但在控制栏下方 */
}

/* 弹幕样式 */
/deep/ .danmaku-item {
  display: block;
  background: rgba(0, 0, 0, 0.6);
  border-radius: .4rem;
  margin-top: .1rem;
  padding: .04rem .2rem;
  max-width: 4.38rem;
  margin-left: .14rem;
  line-height: 1.6;
  font-size: .16rem;
  font-weight: bold;

  /*position: absolute;*/
  /*white-space: nowrap;*/
  /*font-size: 16px;*/
  /*font-weight: bold;*/
  /*text-shadow: 0 0 2px #000, 0 0 2px #000; !* 文字描边，增加可读性 *!*/
  /*will-change: transform; !* 优化动画性能 *!*/
  /*transition: transform 0.1s linear;*/
}

/* 特殊弹幕样式（如礼物弹幕等） */
.special-danmaku {
  color: #ffcc00 !important;
  font-size: 18px;
  text-shadow: 0 0 3px #ff6600;
}

/* 弹幕控制区域 */
.danmaku-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  z-index: 5; /* 确保在弹幕上方 */
}

.toggle-button {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.toggle-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.speed-select {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 10px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.speed-select option {
  background-color: #333;
}
</style>
